<template>
  <div>
    <Map></Map>
  </div>
</template>
<script setup >
import Map from "./components/Map.vue";

// onMounted(() => {
//   initMap();
// });
// 实例化点标记
// function initMap() {
//   AMapLoader.load({
//     key: "f04a2a00725c91966cb0151e8c6989b8", // 申请好的Web端开发者Key，首次调用 load 时必填
//     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//     plugins: [
//       "AMap.Geolocation",
//       "AMap.GeoBoundary", //行政区边界查询
//       "AMap.Scale",
//       "AMap.ControlBar", //必须是这个精确名称
//       "AMap.ToolBar", //缩放控件
//       "AMap.HawkEye", //鹰眼控件
//       "AMap.Compass", //指南针控件
//       "AMap.MapType", //图层类型控件
//       "AMap.PlaceSearch", //地点查询
//       "AMap.DistrictSearch", //行政区查询
//       "AMap.Geocoder", //地理编码
//       "AMap.MarkerClusterer", //点聚合
//       "AMap.PolyEditor", //多边形编辑器
//       "AMap.CircleEditor", //圆形编辑器
//       "AMap.PolygonEditor", //多边形编辑器
//       "AMap.PolylineEditor", //折线编辑器
//       "AMap.RectangleEditor", //矩形编辑器
//       "AMap.GeoJSON", //GeoJSON 解析
//     ],
//   }).then((AMapl) => {
//     const map = new AMapl.Map("amap", {
//       mapStyle: "amap://styles/darkblue", //设置地图的显示样式
//       // features: ["point"],
//       zoom: 12, //初始化地图层级
//       resizeEnable: true, //是否监控地图容器尺寸变化
//       center: [120.090113, 30.319728], //初始化地图中心点
//       viewMode: "3D", //是否为3D地图模式
//       pitch: 20.5, //初始化相机视角仰角 制图模式和卫星模式下，可设定取值范围-90~0；2D、3D模式下，取值范围0~0（3D模式0不平），默认为0。3D模式下行人视角可设置取值范围-70~0
//       showBuildingBlock: true, //显示3D建筑
//       liteMode: true, //轻量级模式
//       // layers: [
//       //   new AMapl.TileLayer.RoadNet({ zIndex: 20 }),
//       //   new AMapl.TileLayer({
//       //     zIndex: 6,
//       //     // opacity: 0.2,
//       //     // getTileUrl(x, y, z) {
//       //     //   // 使用代理路径解决跨域
//       //     //   return `/tianditu/DataServer?T=ter_w&x=${x}&y=${y}&l=${z}`;
//       //     // },
//       //   }),
//       // ],
//     });

//     new AMapl.DistrictSearch({
//       extensions: "all", //返回行政区边界涉及的多边形和圆（内置地图自带边界数据）
//       subdistrict: 0, //返回下级行政区
//     }).search("拱墅区", (status, result) => {
//       if (status === "complete") {
//         const outer = [
//           new AMapl.LngLat(-360, 90, true),
//           new AMapl.LngLat(-360, -90, true),
//           new AMapl.LngLat(360, -90, true),
//           new AMapl.LngLat(360, 90, true),
//         ];
//         const holes = result.districtList[0].boundaries;
//         const pathArray = [outer];
//         pathArray.push.apply(pathArray, holes);

//         const polygon = new AMapl.Polygon({
//           strokeColor: "#00eeff", //边线颜色
//           strokeWeight: 2, //边线宽度，像素
//           fillColor: "#71B3ff", //填充颜色
//           fillOpacity: 0.2, //填充透明度
//         });

//         polygon.setPath(pathArray);
//         map.add(polygon);
//       }
//     });
//     // 1.比例尺控件(左下角)
//     const scale = new AMapl.Scale({
//       position: "LB",
//       offset: [10, 10],
//     });

//     map.addControl(scale);
//     // //2.缩放控件(左上角)
//     const zoomCtrl = new AMapl.ToolBar({
//       position: {
//         top: "10px",
//         left: "10px",
//       },
//       offset: [10, 10],
//     });
//     map.addControl(zoomCtrl);
//     // // //3.定位控件(右下角)
//     const geolocation = new AMapl.Geolocation({
//       position: "RB",
//       showButtonWhentrue: true,
//       offset: [10, 30],
//     });
//     map.addControl(geolocation);
//     //4.ControlBar(3D专用控制栏) 指南针
//     const controlBar = new AMapl.ControlBar({
//       showControlButton: true,
//       position: {
//         right: "15px",
//         top: "15px",
//       },
//     });
//     map.addControl(controlBar);
//     // /*=======可选高级功能=======*/
//     // //5.鹰眼控件(右下角) 开启鹰眼控件，默认不显示 缩略图控件，默认不显示 鹰眼控件，默认不显示
//     const overView = new AMapl.HawkEye({
//       isOpen: true,
//       offset: [10, 100],
//     });
//     map.addControl(overView);
//     // //6.罗盘控件(右上角) 地图类型控件，默认显示地图、卫星图、3D视图切换按钮
//     const compass = new AMapl.MapType({
//       position: "RT",
//       offset: [10, 120],
//     });
//     map.addControl(compass);
//   });
// }
</script>
<style lang='less' scoped>
</style>